<template>
  <div id="homecate">
    <van-swipe :autoplay="3000" class="swipe">
      <van-swipe-item
        v-for="(image, index) in images"
        :key="index"
        class="swipe-item"
      >
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <head-line :dest="dest" :desc="desc"></head-line>
    <goods :goodsList="goodsList"></goods>
  </div>
</template>
<script>
import { getBanners } from "network/home";
import { getCateData } from "network/home";

import HeadLine from "components/common/HeadLine.vue";
import Goods from "components/common/Goods.vue";

export default {
  name: "HomeCate",
  data() {
    return {
      images: [],
      dest: "",
      desc: "",
      goodsList: [],
    };
  },
  components: {
    HeadLine,
    Goods,
  },
  created() {
    this.getBanners();
    this.getCateData();
  },
  // beforeUpdate() {
  //   this.getBanners();
  //   this.getCateData();
  // },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      this.getBanners();
      this.getCateData();
    },
  },
  methods: {
    getBanners() {
      getBanners(this.$route.params.id)
        .then((res) => {
          this.images[0] = res.data.data.currentCategory.banner_url;
          this.images[1] = res.data.data.currentCategory.img_url;
          this.images[2] = res.data.data.currentCategory.wap_banner_url;
          this.dest = res.data.data.currentCategory.name;
          this.desc = res.data.data.currentCategory.front_desc;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCateData() {
      getCateData(this.$route.params.id)
        .then((res) => {
          this.goodsList = res.data.data.goodsList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.swipe {
  margin-top: 1px;
  height: 150px;
}
.swipe img {
  width: 100%;
  height: 150px;
}
</style>